#myCourse {
    @include flexbox();
    @include flex-direction(column);
    height: 100%;
    background: rgba(246,246,246,1);
    .mc {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 90%;
        height: calc(100% - 45px);
        background: rgba(246,246,246,1);
        z-index: 2;
        div {
            width: 150px;
            height: auto;
            margin: 0 auto;
            padding-top: 150px;
            img {
                display: block;
                margin-left: 50%;
                transform: translateX(-50%);
            }
            p {
                margin-top: 15px;
                font-size: 17px;
                color: rgba(75,75,75,1);
                text-align: center;
            }
        }
    }
    header {
        @include flexbox();
		height: 45px;
        line-height: 45px;
        color: #fff;
        background: linear-gradient(to right, #2fd4ac,  #2fd492);
        i {
            width: 30px;
            background: url(image/icon_return.png) no-repeat center;
            background-size: 100%;
        }
        div {
            @include flex();
            margin-right: 30px;
            text-align: center;
            font-size: 18px;
        }
    }
    .nav {
        @include flexbox();
        height: 49px;
        line-height:49px;
        background: #fff;
        border-bottom: 1px solid rgb(229,229,229);
        div {
            @include flex();
            text-align: center;
            a {
                display: inline-block;
                margin: auto;
                min-width: 60%;
                height: 48px;
                font-size: 16px;
                color: rgba(51,51,51,1);
                b {font-weight: normal;}
            }
        }
        div.active {
            a {
                color: rgb(299,50,45);
                border-bottom: 2px solid rgb(229,50,45);
            }

        }
    }
    .border-8 {
        width: 100%;
        height: 8px;
        background: #F6F6F6;
    }
    .swipe {
        @include flex();
        width: 100%;
        overflow-y: scroll;
        .allCourse {
            ul.list {
                @include flex();
                width: 100%;
                overflow-y: scroll;
                // background: #fff;
                li {
                    height: 1.2rem;
                    background: #fff;
                    width: 3.5rem;
                    margin: auto;
                    margin-bottom: 0.16rem;
                    &.hasBackImg {
                        background-image: url(image/expired_time.png);
                        background-repeat: no-repeat;
                        background-position: right 16px;
                        background-size:  68px;
                    }
                    &>a {
                        @include flexbox();
                        &>img {
                            width: 100px !important;
                            height: 100px !important;
                            margin: 0.1rem;
                        }
                        &>div {
                            @include flex();
                            margin-left: 10px;
                            h3 {
                                font-size: 14px;
                                margin-top: 0.1rem;
                                width: 100%;
                                color: rgba(0,0,0,0.6);
                                overflow:hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            div {
                                font-size: 9px;
                                width: 100%;
                                color: rgba(0,0,0,0.3);
                                overflow:hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            .expiredTime {
                                color: rgba(0,0,0,0.2);
                            }
                            p {
                                @include flexbox();
                                @include align-content(center);
                                height: 18px;
                                line-height: 18px;
                                i {
                                    color: rgba(0,0,0,0.3);
                                    font-weight: normal;
                                    display: inline-block;
                                    font-size: 9px;
                                }

                            }
                        }
                        .alreadyJoinBtn {
                            display: inline-block;
                            width: 63px;
                            height: 23px;
                            line-height: 23px;
                            border: 1px solid #38ea9d;
                            text-align: center;
                            border-radius: 12px;
                            font-size: 9px;
                            background:linear-gradient(to bottom,#43d7b4 ,#38b396);
                            color: #fff;
                            margin-top: 0.08rem

                        }
                    }
                }
            }
        }

    }
}